<template>
	<div class="MobileLogin">
		<h2>Login</h2>
		<div class="div1">
			<p><input  v-model="user.username" type="text" placeholder=" 请输入账号"></input></p>
			<p><input  v-model="user.password" type="password" placeholder=" 请输入密码"></input></p>
		</div>
		<button @click="login()">登录</button>
	</div>
</template>

<script>
	export default {
		name: 'MobileLogin',
		data(){
			return{
				user:{}
			}
		},
		methods:{
			login() {
				this.$postkv("/api/login", this.user)
					.then((resp) => {
						console.log(resp.data);
						console.log(resp.data.data.token);
						// 获取token,并把他存在浏览器里面
						let token = resp.data.data.token;
						window.localStorage.setItem("token", token);
			
						//头部带上token获取用户信息
						this.$get("/api/user/info").then((resp) => {
							console.log(resp.data);
			
							window.localStorage.setItem("img", resp.data.data.img);
							window.localStorage.setItem("name", resp.data.data.name);
							this.$store.state.name = resp.data.data.name;
							this.$store.state.pic = resp.data.data.img;
							// 跳转管理员首页
							this.$router.push("/mobile/melist");
							
						})
					})
			}
		},
		mounted() {
			this.$get("api/public/checkToken").then((resp)=>{
				console.log(resp.data);
			})
		}
	}
</script>

<style scoped>
	.MobileLogin {
		background: linear-gradient(to bottom, #92a69b, #7e5d3a);
		height: 60rem;
	}

	.MobileLogin h2 {
		color: white;
		text-align: center;
		font-size: 3rem;
		line-height: 13rem;
	}
	.MobileLogin .div1{
	}
	.MobileLogin .div1 p{
		margin: 1rem;
	}
	
	.MobileLogin .div1 input {
		width: 18rem;
		height: 2.5rem;
		border-radius: 0.5rem;
		background-color: transparent;
		border: none;
		border: white 1px solid;
		position: relative;
		margin-left: 2.5rem;
	}
	input::-webkit-input-placeholder{
		color: white;
	}
	.MobileLogin  button{
	margin: 1rem;
	margin-left: 6rem;
	border: none;
	width: 13rem;
	height: 2.5rem;
	color: white;
	border-radius: 0.5rem;
	background-color: #73654e;
	}
</style>